<template>
    <app-layout>
        <section class="content-header">
            <h1>
                App 设置
                <small></small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">大转盘</a></li>
                <li class="active">添加奖品</li>
            </ol>
        </section>

    <section class="content">
        <!-- Default box -->
        <div class="box box-primary">

            <div class="box-header with-border">
                <h3 class="box-title">添加奖品</h3>
            </div>

            <div class="box-body">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="奖品类型">
                                <el-select v-model="form.type" placeholder="请选择奖品类型">
                                    <el-option label="积分" value="1"></el-option>
                                    <el-option label="实物" value="2"></el-option>
                                </el-select>                                
                            </el-form-item> 

                            <el-form-item label="奖品等级">
                                <el-select v-model="form.name" placeholder="请选择奖品等级">
                                    <el-option label="一等奖" value="一等奖"></el-option>
                                    <el-option label="二等奖" value="二等奖"></el-option>
                                    <el-option label="三等奖" value="三等奖"></el-option>
                                    <el-option label="四等奖" value="四等奖"></el-option>
                                    <el-option label="五等奖" value="五等奖"></el-option>
                                    <el-option label="六等奖" value="六等奖"></el-option>
                                </el-select>
                            </el-form-item>    

                            <el-form-item label="商家ID">
                                <el-input v-model="form.business_id"></el-input>
                            </el-form-item>    

                            <el-form-item label="奖品名称">
                                <el-input v-model="form.content"></el-input>
                            </el-form-item>

                            <el-form-item label="积分值">
                                <el-input v-model="form.credits"></el-input>
                            </el-form-item> 

                            <el-form-item label="奖品图片">
                                <el-upload
                                name="picture"
                                class="avatar-uploader"
                                :action="API.UPLOADS"
                                :show-file-list="false"
                                :on-success="handlePictureSuccess"
                                :headers="headers">
                                <img v-if="form.prize_image" :src="form.prize_image" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>                            

                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="数量">
                                <el-input v-model="form.count"></el-input>
                            </el-form-item>

                            <el-form-item label="中奖几率">
                                <el-input v-model="form.probability"></el-input>
                            </el-form-item>

                         
                            <el-form-item label="有效期">
                                <el-date-picker
                                    v-model="form.expiry"
                                    type="date"
                                    placeholder="有效期"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>  


                            <el-form-item label="领奖时间">
                                <el-date-picker
                                    v-model="time_range"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>                             

                            <el-form-item label="领取方式">
                                <el-select v-model="form.receive_way" placeholder="请选择领取方式">
                                    <el-option label="自取" value="1"></el-option>
                                </el-select>                                
                            </el-form-item>

                        </el-col>
                    </el-row>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button @click="$router.go(-1)">取消</el-button>
                    </el-form-item>                    
                    
                </el-form>
            </div>
        </div>
        <!-- /.box -->
    </section>        

    </app-layout>
</template>

<script>
import * as API from "../../Consts/Api";
import * as APP from "@/constants/app";
import Layout from "@/components/Layout";


export default {
    components: {
        "app-layout": Layout
    },

    data() {
      return {
        API,
        headers: {
            Token: this.$storage.get("user").token,
            Version: APP.VERSION
        },        
        time_range: [],
        form: {
            activity_id: this.$route.query.activity_id,
            type: '', 
            name: '',
            content: '',                     
            credits: '',
            prize_image: '',
            count: '',
            receive_time_start: '',
            receive_time_end: '',
            expiry: '',
            probability: '',
            receive_way: '',
            business_id: '',
        }
      }
    },
    methods: {
        onSubmit() {
            this.form.receive_time_start = this.time_range[0];
            this.form.receive_time_end = this.time_range[1];

            this.$http.post(API.PRIZES, this.form).then(response => {
                if (response.data.status == "no") {
                    this.$message({
                        message: response.data.message,
                        type: "error",
                        duration: 5000
                    });
                } else {
                    this.$message({
                        message: '创建成功',
                        type: "success",
                        duration: 5000
                    });
                    
                    this.$router.go(-1);
                }
            });
        },

        handlePictureSuccess(res, file) {        
            this.form.prize_image = res.data.url;
        },

    },


};
</script>